#header {
    position: absolute;
    top: 10px
}

.header-right {
    width: 280px
}

.content {
    padding: 5px;
    width: 100%;
    box-sizing: border-box
}

.col25 {
    display: inline-block;
    width: 23%;
    padding: 10px;
    position: relative
}

.col75 {
    display: inline-block;
    width: 73%;
    padding: 10px;
    position: relative
}

.textAlignC {
    text-align: center
}

* {
    margin: 0;
    padding: 0
}

canvas {
    display: inline-block;
    position: absolute
}

.dis_none {
    display: none
}

.toCenter {
    text-align: center;
    top: -580px
}

.toCenter section {
    margin: 0 35%
}

.toCenter section img {
    z-index: 99
}

.toCenter section div {
    z-index: 101
}

.toCenter img:hover {
    cursor: pointer
}

.round {
    position: relative;
    right: 186px
}

@keyframes mymove {
    0% {
        right: 186px
    }
    100% {
        right: 0
    }
    0% {
        right: 186px
    }
}

@-moz-keyframes mymove {
    0% {
        right: 186px
    }
    100% {
        right: 0
    }
    0% {
        right: 186px
    }
}

@-webkit-keyframes mymove {
    0% {
        right: 186px
    }
    100% {
        right: 0
    }
    0% {
        right: 186px
    }
}

@-o-keyframes mymove {
    0% {
        right: 186px
    }
    100% {
        right: 0
    }
    0% {
        right: 186px
    }
}

@keyframes mymove2 {
    0% {
        right: 0
    }
    100% {
        right: 186px
    }
    0% {
        right: 0
    }
}

@-moz-keyframes mymove2 {
    0% {
        right: 0
    }
    100% {
        right: 186px
    }
    0% {
        right: 0
    }
}

@-webkit-keyframes mymove2 {
    0% {
        right: 0
    }
    100% {
        right: 186px
    }
    0% {
        right: 0
    }
}

@-o-keyframes mymove2 {
    0% {
        right: 0
    }
    100% {
        right: 186px
    }
    0% {
        right: 0
    }
}

.toCenter {
    top: 0;
}

.col75 {
    width: 80%;
}

html,
body {
    overflow: hidden;
}

section {
    width: 650px;
}

.edasLineDiv {
    width: 100%;
    height: 100%;
    text-align: center;
}

.edasLineDivMiddle:hover {
    width: 120%;
    height: 120%;
}

.edasLineDiv .edasLineImg {
    width: 100%;
    height: 100%;
}

.edasLineDiv > div {
    margin: 20px 35px;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.edasLineDiv div img {
    height: 120px;
}

.edas-line-iv-middle {
    cursor: pointer;
    position: relative;
}

.edas-line-iv-middle > img {
    position: absolute;
    width: 650px;
    left: 0;
    top: 0;
}

.edas-line-iv-middle > div {
    position: relative;
    margin: 0;
    width: 150px;
}

.edas-line-iv-middle div img {
    height: 110px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.edas-line-iv-middle div span {
    position: absolute;
    top: 245px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.iconborder {
    height: 110px;
    width: 110px;
    position: relative;
    margin-bottom: 10px;
}

.iconborder .iconRando {
    background: url(../img/navIcon.png) no-repeat;
    background-position: -3px -3px;
    height: 110px;
    width: 110px;
}

.iconborder .iconRando-heart {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 45px;
    width: 45px;
    margin-top: 34px;
    cursor: default!important;
}

.iconborder-center {
    height: 110px;
    width: 110px;
    position: relative;
    margin-bottom: 10px;
}

.iconborder-center .iconRando-heart {
    position: absolute;
    left: 0;
    top: 50;
    right: 0;
    bottom: 50;
    margin: auto;
    height: 60px;
    width: 60px;
    margin-top: 34px;
    cursor: default!important;
}

.mainHeader {
    text-align: center;
    position: relative;
    top: 90px;
    color: #3A6197;
    font-size: 28px;
    font-weight: bold;
}

.boxZone {
    width: 100%;
    height: 100%;
}

.boxZone .boxCanvas {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 420px;
    width: 800px;
    margin: auto;
    background-image: url('../img/side.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.boxCanvas > div {
    position: absolute;
}

.boxCanvas .bigBox {
    height: 180px;
    width: 180px;
    background-image: url('../img/bigcube.png');
    background-size: 180px 180px;
    left: 50px;
    top: -50px;
}

.boxCanvas .cubeBox {
    height: 100px;
    width: 100px;
    background-image: url('../img/cube.png');
    background-size: 100px 100px;
}

.boxCanvas .redCubeBox {
    background-image: url('../img/redCubeBox.png');
}

.box1 {
    left: 360px;
    top: 40px;
}

.box2 {
    left: 240px;
    top: 100px;
}

.box3 {
    left: 125px;
    top: 160px;
}

.box4 {
    left: 360px;
    top: 160px;
}

.box5 {
    left: 480px;
    top: 105px;
}

.box6 {
    left: 240px;
    top: 225px;
}

.box7 {
    left: 520px;
    top: 200px;
}

.box8 {
    left: 400px;
    top: 260px;
}

.boxZone .box-canvas {
    position: absolute;
    height: 420px;
    width: 800px;
    left: calc(50% - 400px);
    top: calc(50% - 210px);
}

@keyframes boxShake {
    0% {
        transform: rotateX(10deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(-10deg) rotateY(-10deg);
    }
    20% {
        transform: rotateX(-10deg) rotateY(10deg);
    }
    30% {
        transform: rotateX(10deg) rotateY(10deg);
    }
    40% {
        transform: rotateX(-10deg) rotateY(0deg);
    }
    50% {
        transform: rotateX(9deg) rotateY(8deg);
    }
    60% {
        transform: rotateX(-1deg) rotateY(-7deg);
    }
    70% {
        transform: rotateX(8deg) rotateY(2deg);
    }
    75% {
        transform: rotateX(-6deg) rotateY(-7deg);
    }
    80% {
        transform: rotateX(7deg) rotateY(6deg);
    }
    83% {
        transform: rotateX(-6deg) rotateY(-7deg);
    }
    86% {
        transform: rotateX(7deg) rotateY(5deg);
    }
    90% {
        transform: rotateX(1deg) rotateY(-6deg);
    }
    92% {
        transform: rotateX(-7deg) rotateY(0deg);
    }
    95% {
        transform: rotateX(6deg) rotateY(-5deg);
    }
    97% {
        transform: rotateX(-3deg) rotateY(2deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg);
    }
}

.onhover {
    -webkit-animation: scaleBox 1.5s ease-in-out 0.5s infinite normal;
    -moz-animation: scaleBox 1.5s ease-in-out 0.5s infinite normal;
    -o-animation: scaleBox 1.5s ease-in-out 0.5s infinite normal;
    animation: scaleBox 1.5s ease-in-out 0.5s infinite normal;
}

/** 设置标题 */

.header {
    text-align: center;
    font-size: xx-large;
    color: #3A6197;
    font-weight: bold;
    margin: 15px 0;
}

.header-abs-top {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.img_div {
    position: absolute;
    left: 0;
    top: calc(50% + 110px);
    right: 0;
    bottom: 0;
    height: 200px;
    margin: auto;
}